Android TransitionManager

Transition 最基本的概念就是讓你在一個Scene(起始佈局)到另一個Scene(結束佈局)之間產生動畫。
而Scene是什麼呢？Scene基本是上指在螢幕上的View階層。

範例如下：

像這樣，建立3個Scene，在Scene與Scene之間加入Transition，Transition Manager就會自動加上動畫。

步驟一：新增3個Scene

res/layout/scene1.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/transition_oval_blue"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:gravity="center"
        android:src="@drawable/oval_blue" />
    <ImageView
        android:id="@+id/transition_oval_green"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_below="@id/transition_oval_blue"
        android:src="@drawable/oval_green" />
    <ImageView
        android:id="@+id/transition_oval_red"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_below="@id/transition_oval_green"
        android:src="@drawable/oval_red" />
</RelativeLayout>

res/layout/scene2.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/transition_oval_blue"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:src="@drawable/oval_blue" />
    <ImageView
        android:id="@+id/transition_oval_green"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/oval_green" />
    <ImageView
        android:id="@+id/transition_oval_red"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/oval_red" />
</RelativeLayout>

res/layout/scene3.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal|center_vertical"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/transition_oval_blue"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="start"
        android:src="@drawable/oval_blue" />
    <ImageView
        android:id="@+id/transition_oval_green"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="center_horizontal"
        android:src="@drawable/oval_green" />
    <ImageView
        android:id="@+id/transition_oval_red"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="end"
        android:src="@drawable/oval_red" />
</LinearLayout>

步驟二：在FrameLayout裡include第一個scene

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">
    <FrameLayout
        android:id="@+id/scene_root"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <include layout="@layout/scene1" />
    </FrameLayout>
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal">

    <Button
        android:id="@+id/scene1Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Scene1" />

    <Button
        android:id="@+id/scene2Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Scene2" />

    <Button
        android:id="@+id/scene3Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Scene3" />

    </LinearLayout>
</LinearLayout>

步驟二： TransitionManager.go(scene1)指定要到哪個Scene

MainActivity

val scene1 = Scene(scene_root, scene_root.findViewById(R.id.container) as ViewGroup)

val scene2 = Scene.getSceneForLayout(scene_root, R.layout.scene2, this)

val scene3 = Scene.getSceneForLayout(scene_root, R.layout.scene3, this)

scene1Button.setOnClickListener {
    // 到Scene1
    TransitionManager.go(scene1)
}

scene2Button.setOnClickListener {
    // 到Scene2
    TransitionManager.go(scene2)
}

scene3Button.setOnClickListener {
    // 到Scene3
    TransitionManager.go(scene3)
}

是不是很簡單，你只要使用TransitionManager.go(scene) 指定要到哪個Scene，TransitionManager就會使用預設的動畫在2個scene之間增加過場動畫。

除了預設的動畫，還是可以自訂Scene與Scene之間的動畫，下一篇就來介紹如何自訂動畫。

完整程式：
https://github.com/evanchen76/BasicTransition